

<template>
  <div>
    <div class="flex-start-center">
      <el-input
        v-model="searchName"
        style="width: 240px"
        placeholder="请输入搜索地点"
      />
      <a-button type="primary" @click="clickShow">定位</a-button>
    </div>

    <div v-if="show">{{ searchName }}的经纬度是{{ position }}</div>
    <baidu-map class="bm-view" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
      <bm-marker
        v-if="show"
        :position="position"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
      >
        <bm-label
          :content="searchName"
          :labelStyle="{ color: 'red', fontSize: '24px' }"
          :offset="{ width: -35, height: 30 }"
        />
      </bm-marker>
      <!-- <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation> -->
    </baidu-map>
  </div>
</template>
<script setup>
// import axios from "axios";
import {nextTick, onMounted, ref } from "vue";
import axios from "axios";
const show = ref(false);
const mapshow = ref(true);
const searchName = ref("");
const position = ref({ "lat": 32.047295, "lng": 118.790606 });


const center = ref({
  lng: 116.404,
  lat: 39.915
});

let zoom = ref(15);

const syncCenterAndZoom = (obj) => {
  const { lng, lat } = obj
console.log(lng, lat);
  nextTick(() => {
    center.value.lng = lng;
    center.value.lat = lat;
  })
};



// const position=ref({})
const clickShow = () => {
  show.value = false;
  mapshow.value = false;
  searchLocation(searchName.value);
};
const locationSuccess = (point, AddressComponent, marker) => {
  console.log(point, AddressComponent, marker);
};

const searchLocation = (query) => {
  // 使用axios向百度地图API发送请求
  axios
    .get("/dev-api/place/v2/search", {
      params: {
        query: query,
        region: "全国",
        output: "json",
        ak: "AvylNyOwJLfDaCZGqSK36pSAjyLIxFl6",
      },
    })
    .then((response) => {
      // 处理返回的数据
      console.log(response.data);
      position.value = response.data.results[0].location;
      console.log(position.value);
      center.value=position.value
    //   syncCenterAndZoom(position.value)
      show.value = true;
      mapshow.value = true;
      // 在这里处理返回的数据，获取经纬度等信息
    })

};
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
.flex-start-center {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
</style>